
<script>
    export default {
        data(){
            return {
                baseUrl:'/manage',
                menu:[
                    {
                        path:'/home',
                        text:'首页',
                        icon:'House',
                    },
                    {
                        path:'/user',
                        text:'用户管理',
                        icon:'User',
                        children:[
                            {
                                path:'/list',
                                text:'列表'
                                
                            },
                            {
                                path:'/add',
                                text:'添加'
                            }
                        ]
                    },
                    {
                        path:'/goods',
                        text:'商品管理',
                        icon:'Box',
                        children:[
                            {
                                path:'/list',
                                text:'列表'
                            },
                            {
                                path:'/add',
                                text:'添加'
                            }
                        ]
                    },
                    {
                        path:'/category',
                        text:'分类管理',
                        icon:'Paperclip',
                        children:[
                            {
                                path:'/list',
                                text:'列表'
                            },
                            {
                                path:'/add',
                                text:'添加'
                            }
                        ]
                    },
                ],
                userInfo:{},
            }
        },

        created(){
            //获取本地存储
            let userInfo = localStorage.getItem('userInfo')
            try{
                userInfo = JSON.parse(userInfo) || {}
            }catch(err){
                userInfo = {}
            }
            this.userInfo = userInfo
        },
        methods:{
            logout(){
                //退出清除本地存储
                localStorage.removeItem('userInfo'),
                //跳回登陆页
                this.$router.push('/login')
            }
        }
    }

</script>

<template>
    <el-container class="common-layout content " style="height:100vh" >
      <el-aside width="200px" style="background-color:#eef">
        <h4 style="background-color:#eef">银豹收银系统</h4>
        <el-row class="tac" >
            <el-col>
            <el-menu
                background-color="#eef"
                class="el-menu-vertical-demo"
                :unique-opened="true"
                :router="true"
            >
                <template v-for="item in menu">
                    <el-sub-menu :key="item.path" :index="baseUrl + item.path" v-if="item.children">
                        <template #title>
                            <el-icon>
                                <component :is="item.icon"></component>
                            </el-icon>
                            <span>{{item.text}}</span>
                        </template>
                            <el-menu-item :key="it.path" :index="baseUrl + item.path + it.path" v-for="it in item.children">{{it.text}}</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item :key="item.path + ''" :index="baseUrl + item.path" v-else>
                        <el-icon>
                            <component :is="item.icon"></component>
                        </el-icon>
                        <span>{{item.text}}</span>
                    </el-menu-item>
                </template>
            </el-menu>
            </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-header style="background-color:#F5F7FA">
            <el-row >
                <el-col :span="12"></el-col>
                <el-col :span="8" class="top-user">
                    <el-avatar
                        style="margin-top:10px"
                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    />
                </el-col>
                <el-col :span="3" class="top-text">
                    <el-button link style="color:blueviolet">你好，{{userInfo.username}}</el-button>
                </el-col>
                <el-col :span="1" class="top-text">
                    <el-button link @click="logout"> 退出</el-button>
                </el-col>
            </el-row>
            
        </el-header>
        <el-main >
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>
<style>
    html,body{
        margin: 0;
        padding: 0;
    }
</style>
<style scoped>
    h4{
        padding: 0;
        margin: 0;
        line-height: 60px;
        text-align: center;
    }
    .top-user{
        text-align:right;
    }

    .top-text{
        text-align: center;
        line-height: 60px;
    }
    .content{
        overflow-y:auto;
        height:calc(100vh - 60px);
    }
</style>